<template>
  <el-dialog :model-value="isVisible" :title="title" :width="width" :fullscreen="isFullscreen"
    :close-on-click-modal="false" :close-on-press-escape="false" v-bind="{ ...extraProps }"
    :before-close="dialogBeforeClose">
    <slot name="content"></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="isShowCancel" @click="handleCancel">{{ cancelText }}</el-button>
        <el-button v-if="isShowSure" :loading="isLoading" type="primary" @click="handleSure">{{ sureText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { UserDialogExtraProps } from "./dialogTypes"
import { isShowDialog } from "@/keys";

// 确定按钮loading效果
let isLoading = ref(false);

// 后代组件注入显示
//    const isVisible  =  inject(isShowDialog);
const handleCloseDialog = inject("handleCancel", () => { });

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
  // 弹框标题
  title: {
    type: String,
    default: "Tips"
  },
  // 弹框宽度
  width: {
    type: [String, Number],
    default: "600px",
  },
  // 弹框是否全屏
  isFullscreen: {
    type: Boolean,
    default: false,
  },
  // 弹框的一些其他参数
  extraProps: {
    type: Object as PropType<UserDialogExtraProps>,
    default: {} as PropType<UserDialogExtraProps>,
  },
  // 是否展示取消，默认展示
  isShowCancel: {
    type: Boolean,
    default: true,
  },
  // 取消按钮文字，默认取消
  cancelText: {
    type: String,
    default: "取消"
  },
  // 是否展示确定，默认展示
  isShowSure: {
    type: Boolean,
    default: true,
  },
  // 确定按钮文字，默认确定
  sureText: {
    type: String,
    default: "确定"
  }

})

// 弹框关闭前校验
function dialogBeforeClose() {
  handleCloseDialog();
}

// 取消
function handleCancel() {
  handleCloseDialog();
}

// 修改loading状态
function changeLoading(flag: boolean) {
  isLoading.value = flag;
}

const $emits = defineEmits(["handleSure"])
// 确定
function handleSure() {
  $emits("handleSure")
}

defineExpose({
  changeLoading,
});

</script>

<style scoped lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>